<template>
  <div class="hawkContent">
    <!-- 面包屑 -->
    <hawk-breadcrumb></hawk-breadcrumb>
    <div class="center">
        <!-- 引入表单组件 -->
        <el-form
          :model="alarmForm"
          :rules="alarmFormRules"
          ref="alarmFormRef"
          label-width="120px"
          class="alarm_form"
        >
          <el-form-item label="域名" prop="serverHost">
            <el-input
              v-model="alarmForm.serverHost"
              placeholder="请输入邮件服务器域名"
            ></el-input>
          </el-form-item>
          <el-form-item label="发件人账号" prop="sendAccout">
            <el-input
              v-model="alarmForm.sendAccout"
              placeholder="请输入发件人邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱密码" prop="sendPassword">
            <el-input
              type="password"
              v-model="alarmForm.sendPassword"
              placeholder="请输入邮箱的密码"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script type="text/javascript">
/**
 * @author 秦秋雅
 * @description 告警配置下的邮件告警的视图层
 * @api /alarm/config/mail
 * @since 2021年11月08日 13:50
 * @update 2021年11月10日 15:50
 * @modifier 秦秋雅
 * @bug 无
 * @version v1.0.0
 */
import {
  mailSave,
  getInfo,
  exists,
  mailEdit,
  getMailServer,
} from '@/api/alarm/config/mail'
import { async } from 'q'
export default {
  data() {
    var checkMailHost = async (rule, value, callback) => {
      let ret = await this.mailHostExists()
      if (ret) {
        callback(new Error('邮件服务器域名已存在'))
      }
      // else{
      //   callback()
      // }
    }

    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    return {
      type: 0,
      alarmForm: {
        id: '',
        serverHost: '',
        sendAccout: '',
        sendPassword: '',
      },
      addForm: {
        id: '',
        serverHost: '',
        sendAccout: '',
        sendPassword: '',
      },
      alarmFormRules: {
        serverHost: [
          { required: true, message: '请输入邮件服务器域名', trigger: 'blur' },
          { validator: checkMailHost, trigger: 'blur' },
        ],
        sendAccout: [
          { required: true, message: '请输入发件人账号', trigger: 'blur' },
          {
            validator: checkEmail,
            trigger: 'blur',
          },
        ],
        sendPassword: [
          { required: true, message: '请输入发件人账号密码', trigger: 'blur' },
        ],
      },
    }
  },
  // created() {
  //   this.switchType()
  // },
  async mounted() {
    let res = await getMailServer()
    console.log(res)
    this.alarmForm = res.data[0]
  },
  methods: {
    // async switchType(type) {
    //   if (type || type == 0) this.type = type
    //   const { data } = await getInfo(this.type)
    //   this.type == 0
    //     ? (this.alarmForm = Object.assign({}, data))
    //     : (this.smsForm = Object.assign({}, data))
    // },
    async mailHostExists() {
      let res = await exists(this.alarmForm.serverHost)
      console.log(res)
      if (res.code === 20000) {
        return true
      } else {
        return false
      }
    },

    //提交表单
  async  submitForm() {
      this.$refs.alarmFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        if(this.alarmForm.id){
          await mailEdit(this.alarmForm)  
        }else{
          await mailSave(this.alarmForm)  
        }
        this.$message({
          type: 'success',
          message: '操作成功',
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.center {
  width: 700px;
  margin: 0 auto;
  margin-top: 120px;
  .btn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
